<!DOCTYPE html>
<html lang="en">
<head>
    <title>楼盘销控展示</title>
    <meta charset="utf-8">
    <link href="/plugins/echarts/common.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <link rel="stylesheet" href="/style/jmdf.css" media="all">
    <#setting number_format="#.##">
</head>
<body>
<!--顶部-->
<header class="header left">
    <div class="left nav">
        <ul>
            <li>&nbsp;</li>
        </ul>
    </div>
    <div class="header_center left" style="position:relative;font-weight: bold;font-size: 40px;">
        英林镇英林村安置区北区地块房源统计
    </div>
</header>
<div class="con left">
    <div class="div_any">
        <div class="div_any_child" style="width:98%;height: 400px;">
            <div class="div_any_title" style="font-size: 25px;">整体房源情况(套)</div>
            <div id="chooseHousePie" style="height: 400px;"></div>
            <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;left: 1%;top: 8%;">
                <div style="display: inline-block;width:45%;text-align:center;">
                    <div style="color:#fff;font-size: 18px;line-height: 32px;">房源总套数</div>
                    <div style="color:#87cefa;font-size: 30px;line-height: 42px;" id="allHouseCount">0</div>
                </div>
            </div>
            <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;right: -25%;top: 8%;">
                <div style="display: inline-block;width:45%;text-align:center;">
                    <div style="color:#fff;font-size: 18px;line-height: 32px;">房源剩余套数</div>
                    <div style="color:red;font-size: 30px;line-height: 42px;" id="noAllHouseCount">0</div>
                </div>
            </div>
            <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;left: 1%;bottom: 10%;">
                <div style="display: inline-block;width:45%;text-align:center;">
                    <div style="color:#fff;font-size: 18px;line-height: 32px;">今日选房套数</div>
                    <div style="color:#87cefa;font-size: 30px;line-height: 42px;" id="chooseHouseCountDay">0</div>
                </div>
            </div>
            <div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;right: -25%;bottom: 10%;">
                <div style="display: inline-block;width:45%;text-align:center;">
                    <div style="color:#fff;font-size: 18px;line-height: 32px;">累计选房套数</div>
                    <div style="color:red;font-size: 30px;line-height: 42px;" id="chooseHouseCountAll">0</div>
                </div>
            </div>
        </div>
        <div class="left div_table_box" style="width:99%;">
            <div class="div_any_child" style="width:99%;height: 640px;">
                <div class="div_any_title" style="font-size: 25px;">总体房源情况</div>
                <div class="table" style="margin-top: -30px;height: 650px;padding-left: 20px;" id="houseHoldData"></div>
            </div>
        </div>
        <div class="left div_table_box" style="width:99%;">
            <div class="div_any_child" style="width:99%;height: 600px;">
                <div class="div_any_title" style="font-size: 25px;">总体车位情况</div>
                <div class="table" style="margin-top: -30px;height: 550px;padding-left: 20px;" id="carTypeData"></div>
            </div>
        </div>
        <div class="left div_table_box" style="width:99%;">
            <div class="div_any_child" style="width:99%;height: 600px;">
                <div class="div_any_title" style="font-size: 25px;">总体商业、办公情况</div>
                <div class="table" style="margin-top: -30px;height: 550px;padding-left: 20px;" id="houseYcData"></div>
            </div>
        </div>

        <div class="left div_table_box" style="width:99%;">
            <div class="div_any_child" style="width:99%;height: 500px;">
                <div class="div_any_title" style="font-size: 25px;">AB地块房源情况</div>
                <div class="table" style="margin-top: -30px;height: 550px;padding-left: 20px;" id="houseHoldData1"></div>
            </div>
        </div>
        <div class="left div_table_box" style="width:99%;">
            <div class="div_any_child" style="width:99%;height: 400px;">
                <div class="div_any_title" style="font-size: 25px;">C地块房源情况</div>
                <div class="table" style="margin-top: -30px;height: 550px;padding-left: 20px;" id="houseHoldData2"></div>
            </div>
        </div>

    </div>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/plugins/jquery/jquery.min.js"></script>
<script src="/plugins/echarts/echarts.min.js"></script>
</body>
<script>
    function loadHouseHoldData() {
        $("#houseHoldData").html("");
        $("#houseHoldData").html("加载中，请稍后...");
        $.get("houseShowHoldForHQ", {
            zsProjectIdStr: "2,3,4",
            azProjectIdStr: "1,2",
            _time: new Date().getTime()
        }, function (data) {
            $("#houseHoldData").html(data);
        });
    }
    function loadHouseHoldData1() {
        $("#houseHoldData1").html("");
        $("#houseHoldData1").html("加载中，请稍后...");
        $.get("houseShowHoldForHQ", {
            zsProjectIdStr: "2,3,4",
            azProjectIdStr: "1",
            houseStyle: "房源",
            _time: new Date().getTime()
        }, function (data) {
            $("#houseHoldData1").html(data);
        });
    }
    function loadHouseHoldData2() {
        $("#houseHoldData2").html("");
        $("#houseHoldData2").html("加载中，请稍后...");
        $.get("houseShowHoldForHQ", {
            zsProjectIdStr: "2,3,4",
            azProjectIdStr: "2",
            houseStyle: "房源",
            _time: new Date().getTime()
        }, function (data) {
            $("#houseHoldData2").html(data);
        });
    }

    function loadCarTypeData() {
        $("#carTypeData").html("");
        $("#carTypeData").html("加载中，请稍后...");
        $.get("carLotShowHoldForHQ", {
            azProjectIdStr: "1,2",
            _time: new Date().getTime()
        }, function (data) {
            $("#carTypeData").html(data);
        });
    }

    function loadshopHouseTypeData() {
        $("#houseYcData").html("");
        $("#houseYcData").html("加载中，请稍后...");
        $.get("shopHouseShowHoldForHQ", {
            azProjectIdStr: "1,2",
            _time: new Date().getTime()
        }, function (data) {
            $("#houseYcData").html(data);
        });
    }
    $(function () {
        loadHouseHoldData();
        loadHouseHoldData1();
        loadHouseHoldData2();
        loadCarTypeData();
        loadshopHouseTypeData();
        setInterval('loadHouseHoldData()', 30000);
        setInterval('loadHouseHoldData1()', 30000);
        setInterval('loadHouseHoldData2()', 30000);
        setInterval('loadCarTypeData()', 30000);
        setInterval('loadshopHouseTypeData()', 30000);

    })
    ///数据源--------------------------------------------------------------------------------------------------------------------------------------------------------
    layui.config({
        base: '/modules/' //静态资源所在路径
    }).use(['jquery'], function () {
        var $ = layui.jquery;


        var buildChart1 = null;
        var chooseHousePie = null;
        var build_json_choose = [];//已选
        var build_json_noChoose = [];//未选
        var chooseText = "已选";
        var noChooseText = "未选";
        var buildColor = ["#ad0a0a", "#20d057"];

        function initGroup() {
            //饼图、所以房源统计
            chooseHousePie = echarts.init(document.getElementById('chooseHousePie'));
            var optionPie = {
                color: [buildColor[0], buildColor[1]],
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}({c})<br/>{d}%"
                },
                series: [
                    {
                        type: 'pie',
                        center: ['50%', '50%'],
                        radius: [80, 130],
                        x: '0%', // for funnel
                        itemStyle: {
                            normal: {
                                label: {
                                    position: 'center',
                                    fontSize: '25',
                                    formatter: function (params) {
                                        if (params.name == chooseText) {
                                            return chooseText + ":" + (params.percent + '%')
                                        } else {
                                            return noChooseText + ":" + (params.percent + '%')
                                        }
                                    }
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        },
                        data: [
                            {name: chooseText, value: 0},
                            {name: noChooseText, value: 0}
                        ]
                    }
                ]
            };
            chooseHousePie.setOption(optionPie);
        }
        //饼图
        function getBuildData() {
            var objPie = chooseHousePie.getOption();
            $.ajax({
                url: "/showForHQ_Plot_C_two/getBuildChooseHouseInfo?zsProjectIdStr=2,3,4&azProjectIdStr=1,2",
                type: "get",
                dataType: "json",
                success: function (data) {
                    //饼图
                    objPie.series[0].data[0].value = data.pie[0];
                    objPie.series[0].data[1].value = data.pie[1];
                    chooseHousePie.setOption(objPie);
                    //提示文字
                    $("#allHouseCount").html(data.chooseHouseInfo[0]);
                    $("#noAllHouseCount").html(data.chooseHouseInfo[1]);
                    $("#chooseHouseCountDay").html(data.chooseHouseInfo[2]);
                    $("#chooseHouseCountAll").html(data.chooseHouseInfo[3]);
                    $("#smallAllHouseCount").html(data.chooseHouseInfo[4]);
                    $("#noSmallAllHouseCount").html(data.chooseHouseInfo[5]);
                    $("#normalHouseTotalCount").html(data.chooseHouseInfo[6]);
                    $("#noNormalHouseTotalCount").html(data.chooseHouseInfo[7]);
                    $("#fsHouseTotalCount").html(data.chooseHouseInfo[8]);
                    $("#noFsHouseTotalCount").html(data.chooseHouseInfo[9]);

                    $("#bigHouseTotalCount").html(data.chooseHouseInfo[10]);
                    $("#total_big_noChoose").html(data.chooseHouseInfo[11]);
                    $("#noBigHouseTotalCount").html(data.chooseHouseInfo[12]);
                    $("#total_noBig_noChoose").html(data.chooseHouseInfo[13]);

                }
            });
        }
        $(function () {
            initGroup();
            getBuildData();
            setInterval(getBuildData, 30000);
        });
    });


</script>
</html>
